<template>
	
	<view >
			<view class="cu-bar justify-center bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-blue">vue</text>
					<text class="bg-gradual-blue" style="width:3rem"></text>
				</view>
			</view>		
		
		<view class="cate-section">
			
		<view class="cate-item" @tap="toPage('https://didi.github.io/mand-mobile/examples/')">
			
			<image src="/static/temp/c3.png"></image>
			<text>MandMobile</text>
		
		</view>
		<view class="cate-item" @tap="toPage('https://nutui.jd.com/demo.html#/index')">
			
			<image src="/static/temp/c5.png"></image>
			<text>NutUI</text>
			
		</view>
		<view class="cate-item">
			<image src="/static/temp/c6.png"></image>
			<text>jqqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c7.png"></image>
			<text>hui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c8.png"></image>
			<text>mzui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c3.png"></image>
			<text>jqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c5.png"></image>
			<text>weui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c6.png"></image>
			<text>jqqui</text>
		</view>
		
							
	</view>		
		
		<!-- 间隔线 -->
		
		
			<view class="cu-bar justify-center bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-blue">jquery</text>
					<text class="bg-gradual-blue" style="width:3rem"></text>
				</view>
			</view>
		
		<view class="cate-section">
			
		<view class="cate-item">
			<image src="/static/temp/c3.png"></image>
			<text>jqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c5.png"></image>
			<text>weui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c6.png"></image>
			<text>jqqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c7.png"></image>
			<text>hui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c8.png"></image>
			<text>mzui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c3.png"></image>
			<text>jqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c5.png"></image>
			<text>weui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c6.png"></image>
			<text>jqqui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c7.png"></image>
			<text>hui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c8.png"></image>
			<text>mzui</text>
		</view>			
		<view class="cate-item">
			<image src="/static/temp/c7.png"></image>
			<text>hui</text>
		</view>
		<view class="cate-item">
			<image src="/static/temp/c8.png"></image>
			<text>mzui</text>
		</view>	
									
	</view>
	
	<!-- 间隔线 -->

		</view>
	
</template>

<script>
	export default {
		
	methods: {
		toPage(url){
			var gurl='../gourl/gourl?id='+url;
				console.log("url: " + url);
				uni.navigateTo({
					url:gurl
				})
			}
	},	
		
	
		}
	
	
</script>

<style lang="scss">
		page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-10upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
		/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			margin-top: 20upx;
			font-size: 26upx
			
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
</style>
